<template>
  <div class="page-container">
    <!-- 左侧导航 -->
    <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @select="handleSelect"
    >
      <el-menu-item index="1">个人资料</el-menu-item>
      <el-menu-item index="2">个人交易信息</el-menu-item>
      <el-menu-item index="3">收货地址</el-menu-item>
    </el-menu>
    <!-- 右侧内容区域 -->
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { AuthService } from '@/service/auth.ts'
const authService = new AuthService();
const route = useRoute();
const router = useRouter();
const userId = ref(authService.getUserId());

// 引入子组件

// 处理菜单选择
const handleSelect = (index) => {
  switch (index) {
    case '1':
      router.push('/account');
      break;
    case '2':
      router.push('/account/PersonalTradeInfo');
      break;
    case '3':
      router.push('/account/ReceivingAddress');
      break;
    default:
      break;
  }
};


</script>

<style scoped>
.page-container {
  display: flex;
  height: 100vh;
}
.el-menu-vertical-demo {
  width: 200px;
}
.content {
  flex: 1;
  padding: 20px;
  border-left: 1px solid #ebeef5;
}
</style>